<template>
  <div id="shopping-list">
    <div class="list-box">
      <!-- 进度条 -->
      <!-- <el-steps :active="active">
        <el-step title="我的购物车"></el-step>
        <el-step title="确认订单信息"></el-step>
        <el-step title="订单提交成功"></el-step>
      </el-steps> -->
      <!-- 目录栏 -->
       <div class="empty" v-if="items.length == 0" >
        <p class="mb36">购物车里面还是空的呢！</p>
        <el-button type="primary" style="width:60%" @click="()=>{ this.$router.push('/')}">去逛逛</el-button>
      </div>

      <div class="cart-th"  v-if="items.length >0 ">
        <div class="td-control">
          <div class="check" >
              <el-link  @click="checkAll()">全选</el-link>
          </div>
        </div>
        <div class="td-goods">商品</div>
        <div class="td-price">单价（元）</div>
        <div class="td-num">数量</div>
        <div class="td-count">小计</div>
        <div class="td-operate">操作</div>
      </div>
      <!-- 清单 -->
      <div class="list" v-if="items.length >0 "  >
        <div class="cart-tbody" v-for="(value,index) in items" :key="index">
          <div class="goods">
            <div class="commodity">
              <div class="good-box">
                <div class="td-control">
                  <el-checkbox class="check" v-model="value.checked" ></el-checkbox>
                  <div class="good-img" style="margin-top: 4.8%;">
                    <img :src="value.imgs.split(',')[0]" alt />
                  </div>
                </div>
                <div class="td-goods">
                  <div class="title">
                    <br>
                    <router-link tag="a" target="_blank" :to="{name:'Detail',query:{id:value.product_id}}">{{value.product_name}}</router-link>
                  </div>
                </div>
                <div class="td-price">
                   <br>
                  <p>￥{{value.shop_price}}</p>
                </div>
                <div class="td-price">
                   <br>
                  <p>1件</p>
                </div>
                <div class="td-count" style="margin-top: 0.50%;">
                   <br>
                  <div class="count"  >￥{{value.shop_price}}</div>
                </div>
                <div class="td-operate " style="margin-top: 1.8%;">
                  <el-link  @click="deleteAll([value.id])" >移除购物车</el-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 结算  -->
      <div class="cart-result-outer" v-if="items.length >0 " >
        <div class="cart-result">
          <div class="control">
            <div class="text">
              <el-link @click="deleteAll()">批量删除</el-link>
            </div>
          </div>
          <div class="info">
            <div class="count-sum">
              <span>已选择</span>
              <em class="count">{{count}}</em>
              <span>件商品</span>
            </div>
            <div class="price-sum">
              <span>合计：</span>
              <strong class="count">
                <span>￥</span>
                <em>{{total}}</em>
              </strong>
            </div>
          </div>
          <div class="settle">
            <div class="settlement" @click="toOrderCheck()">结算</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      dialogVisible:false,
      radio: "0",
      items: [
      ],
      dzlist:[],
      selectList:[]
    };
  },
  computed:{
      total(){
        try{
         return this.items.map(p=>{
            if(p.checked){
              return parseFloat(p.shop_price)
            }else{
              return 0;
            }
          }).reduce((total, num) => total + num);
        }catch(err){
            return 0 
        }
      },
      count(){
        try{
         return this.items.map(p=>{
            if(p.checked){
              return 1
            }else{
              return 0;
            }
          }).reduce((total, num) => total + num);
        }catch(err){
            return 0 
        }
      }
  },
  mounted() {
    this.init()
  },
  methods: { 
    checkAll(){
        this.items.map(p=>p.checked = true)
    },
    deleteAll(vals){
        if(!vals){
          vals =[]
          this.items.forEach(m=>{
            if(m.checked){
              vals.push(m.id)
            }
            })
        }
        this.$confirm('确定移除该商品吗？', '确认信息', {
        distinguishCancelAndClose: true,
        lockScroll:false,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      .then(() => {
        this.axios.post("/cart/delete",{
          "ids": vals
        }).then(resp=>{
            if(resp.code == 0){
              this.$message.success(resp.msg)
              this.init()
            }else{
              this.$message.error(resp.msg)
            }
        })
        }).catch(err=>{})
    },
    init(){
        this.axios.post("/cart/list").then((resp)=>{
        this.items =  resp.data
      })
    },
    toOrderCheck(){
    let vals =[]
    this.items.forEach(m=>{
      if(m.checked){
        vals.push(m)
      }
    })
    if(vals.length<=0){
      this.$message.error("请勾选对应的商品！")
      return
    }
    this.$router.push({
      name:"OrderCheck",
      query: {
        items:JSON.stringify(vals),
      }
    })
  }
  }
};
</script>

<style scoped>
#shopping-list {
  /* height: 400px; */
  /* background-color: blue; */
}
/* 内容 */
.empty {
  padding-top: 30%;
  text-align: center;
  padding-bottom:45%;
}
#shopping-list .list-box {
  margin: 0 auto;
  width: 1080px;
  /* height: 200px; */
  /* background-color: antiquewhite; */
}
/* 进度条 */
.el-steps--horizontal {
  padding: 2% 5% 0;
}

/* 目录栏 */
.cart-th {
  height: 44px;
  margin-top: 15px;
  font-size: 12px;
  line-height: 44px;
  background-color: #f3f3f3;
}

.td-control {
  float: left;
  overflow: hidden;
  width: 20%;
  height: 100%;
}
.list-box .check {
  float: left;
  margin-left: 15px;
  cursor: pointer;
}

.cart-th .td-goods {
  text-align: left;
}
.td-goods {
  float: left;
  overflow: hidden;
  width: 25%;
}

.td-num {
  float: left;
  overflow: hidden;
  width: 15%;
}
.td-price {
  float: left;
  width: 15%;
}
.cart-th .td-price,
.cart-th .td-num {
  text-align: center;
}

.cart-th .td-count {
  text-align: center;
}
.td-count {
  float: left;
  overflow: hidden;
  width: 15%;
}

.cart-th .td-operate {
  text-indent: 25px;
}
.td-operate {
  float: left;
  width: 10%;
}

/* 清单 */
.count {
  color: #29a3d6;
}
.list {
  /* background-color: burlywood; */
}
.list .cart-tbody {
  margin-top: 25px;
}
.list .cart-tbody .shop {
  overflow: hidden;
  /* padding-left: 2%; */
  height: 26px;
  /* background-color: aqua; */
}
.list .cart-tbody .goods {
  margin-top: 10px;
  border: 1px solid #ddd;
}
.list .cart-tbody .goods .commodity {
  height: 135px;
  /* padding: 0 2%; */
  /* background-color: #f3fbfa; */
  background-color: #f2f6fc;
}
.list .cart-tbody .goods .commodity .good-box {
  border-top: 0;
  padding: 35px 0 20px;
  height: 80px;
  /* background-color: chartreuse; */
}

.good-box .td-control {
  /* background-color: orange; */
}
.good-box .td-control .check {
  margin-top: 32px;
  margin-right: 17%;
  float: left;
}
.good-img {
  float: left;
  overflow: hidden;
}
.good-img img {
  /* height: 100%; */
  width: 100%;
}
.good-box .td-control .good-img {
  width: 80px;
  /* height: 100%;
  background-color: blue; */
}

.good-box .td-goods {
  float: left;
  overflow: hidden;
  width: 26%;
  height: 100%;
  /* background-color: yellow; */
}
.td-goods .title a {
  overflow: hidden;
  width: 93%;
  /* height: 40px; */
  margin-top: 5px;
  font-size: 13px;
  line-height: 20px;
  /* background-color: tomato; */
  -webkit-line-clamp: 2; /*要显示的行数*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.td-goods .title a:hover {
  color: #29a3d6;
  text-decoration: underline;
}

/* .td-price {
  float: left;
  width: 95px;
} */
.good-box .td-price {
  /* margin-top: 5px; */
  width: 15.5%;
  height: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  text-indent: 23%;
  /* text-align: center; */
  white-space: nowrap;
  /* background-color: tomato; */
}

/* .td-num {
  float: left;
  overflow: hidden;
  width: 135px;
} */
.good-box .td-num {
  width: 15.5%;
  height: 100%;
  font-size: 0;
  text-align: center;
  /* background-color: slateblue; */
}

/* .good-count {
  float: left;
  overflow: hidden;
} */
.good-box .td-count {
  width: 13.5%;
  height: 100%;
  /* padding-right: 26px; */
  /* margin-top: 5px; */
  /* text-align: right; */
  text-align: center;
  /* background-color: violet; */
}
.good-box .td-count .count {
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
  white-space: nowrap;
  color: #29a3d6;
}

.good-box .td-operate {
  position: relative;
  width: 7.6%;
  height: 100%;
  /* margin-top: 5px; */
  font-size: 12px;
  line-height: 20px;
  /* text-indent: 25px; */
  white-space: nowrap;
  /* background-color: sienna; */
}
.good-box .td-operate p {
  font-size: 12px;
}
.good-box .td-operate p:hover {
  cursor: pointer;
  color: #29a3d6;
  text-decoration: underline;
}

/* 结算 */
.cart-result-outer {
  width: 100%;
  height: 65px;
  margin-top: 40px;
  margin-bottom: 5%;
}
.cart-result {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
}
.cart-result .control {
  float: left;
  width: 45%;
  height: 20px;
  margin-top: 22px;
  line-height: 20px;
  /* background-color: yellowgreen; */
}
.cart-result .control .check {
  /* margin-left: 8%; */
}
.cart-result .control .text {
  float: left;
  margin-left: 30px;
}
.cart-result .control .text p {
  line-height: 19px;
}

.cart-result .info {
  float: left;
  width: 39%;
  height: 100%;
  padding-right: 1%;
  font-size: 0;
  /* text-align: right; */
  text-align: center;
  /* background-color: violet; */
}
.info .count-sum {
  float: left;
  width: 50%;
  /* height: 100%; */
  margin-top: 20px;
  /* background-color: wheat; */
}
.count-sum em {
  font-size: 18px;
}

.info .price-sum {
  float: left;
  width: 50%;
  /* height: 100%; */
  margin-top: 15px;
  /* background-color: turquoise; */
}
.price-sum .count em {
  font-size: 22px;
}

.cart-result .settle {
  /* position: absolute;
  right: -1px;
  top: -1px; */
  float: left;
  width: 15%;
  height: 100%;
  font-size: 20px;
  /* line-height: 65px; */
  text-align: center;
  background-color: yellow;
}
.settle .settlement {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #29a3d6;
  border-color: #29a3d6;
  font-size: 20px;
  text-align: center;
  line-height: 65px;
  cursor: pointer;
}
.settle .settlement:hover {
  background-color: #0076a4;
}
</style>